<template>
  <div class="login">
    <a-form
      ref="form"
      class="login-form"
      name="custom-validation"
      :model="formState"
      :rules="rules"
    >
      <!-- <div class="login-title-box">
        <div class="login-title">欢迎登录</div>
        <div class="login-subtitle">{{ storeApp.appConfig.name }}</div>
      </div> -->
      <div class="outside-box">
        <div class="login-title">{{ storeApp.appConfig.name }}</div>
        <a-form-item name="userName">
          <a-input
            v-model:value="formState.userName"
            class="button"
            placeholder="请输入账号"
            autocomplete="off"
          >
            <template #prefix>
              <UserOutlined class="icon-color" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item name="password">
          <a-input-password
            v-model:value="formState.password"
            class="button"
            placeholder="请输入登录密码"
            type="password"
            autocomplete="off"
          >
            <template #prefix>
              <LockOutlined class="icon-color" />
            </template>
          </a-input-password>
        </a-form-item>
        <div
          class="mb-24 text-right cursor-pointer"
          @click="resetPasswordModalRef.visible = true"
        >
          忘记密码
        </div>
        <!-- <a-form-item>
          <a-space class="domain">
            <a @click="findPassword">找回密码</a>
            <span style="color: #e9eff3">|</span>
            <a @click="fastRegister">快速注册</a>
          </a-space>
        </a-form-item> -->
        <a-form-item class="btn-box">
          <a-button
            size="large"
            class="login-btn"
            type="primary"
            html-type="submit"
            @click="handleFinish(false)"
          >
            登录
          </a-button>
        </a-form-item>
      </div>
    </a-form>

    <ResetPasswordModal ref="resetPasswordModalRef"></ResetPasswordModal>
  </div>
</template>

<script setup>
import ResetPasswordModal from "./reset-password-modal.vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
// 方法
import { message } from "ant-design-vue";
import { doEncrypt } from "@/utils/common";
import { useStoreUser, useStoreApp } from "@/store";

const storeUser = useStoreUser();
const storeApp = useStoreApp();

const router = useRouter();

const emits = defineEmits(["fastRegister", "findPassword"]);

const form = ref(null);
const formState = reactive({
  userName: "",
  password: "",
  captchaVerification: "",
  rememberMe: false,
});

const resetPasswordModalRef = ref(null);

const activeKey = ref("0");

const rules = {
  userName: [{ required: true, message: "请输入登录账号", trigger: "blur" }],
  userId: [{ required: true, message: "请输入登录工号", trigger: "blur" }],
  password: [
    { required: true, message: "请输入登录密码", trigger: "blur" },
    // { pattern: ruleMap.password.pattern, message: ruleMap.password.msg, trigger: 'blur' },
  ],
};

const handleFinish = () => {
  form.value.validate().then(() => {
    storeUser
      .userLogin({
        username: formState.userName,
        // password: doEncrypt(formState.password, storeUser.rsaKey),
        password: formState.password,
      })
      .then(() => {
        message.success("登录成功");
        router.push("/");
      });
    // storeUser.token = '测试'
    // message.success("登录成功");
    // router.push("/");
  });
};
</script>

<style lang="less" scoped>
.login {
  .login-title-box {
    display: flex;
    align-items: flex-end;
    margin-bottom: 24px;
    .login-title {
      font-size: 22px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #1a1c1d;
      line-height: 30px;
    }
    .login-subtitle {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #aeb0b4;
      line-height: 20px;
      margin-left: 15px;
    }
  }

  .outside-box {
    border-radius: 8px;
    border: 1px solid #e9eff3;
    padding: 40px;
    .login-title {
      font-size: 30px;
      text-align: center;
      margin-bottom: 32px;
      font-weight: 600;
    }
  }

  :deep(.login-form) {
    width: 410px;
    background: #fff;
    border-radius: 4px;
    .ant-input-affix-wrapper {
      background-color: #f5f8fb;
      height: 40px;
    }
    .ant-input-prefix {
      margin-right: 18px;
    }
    .ant-input-suffix {
      margin-right: 5px;
    }
    .ant-form-item {
      margin-bottom: 24px;
      &.btn-box {
        margin-bottom: 0;
      }
    }
    .ant-form-item-with-help {
      margin-bottom: 0;
    }
    .ant-form-item-explain {
      min-height: 24px;
    }
    .ant-input {
      background-color: #f5f8fb;
      border: 1px solid #f5f8fb;
    }
    .forget-psw {
      position: relative;
      top: -6px;
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
      margin-bottom: 26px;
    }
    //登录按钮
    .login-btn {
      width: 100%;
      height: 48px;
    }
  }
}

:deep(
    .ant-form-item-has-error
      :not(.ant-input-affix-wrapper-disabled):not(
        .ant-input-affix-wrapper-borderless
      ).ant-input-affix-wrapper:hover
  ) {
  background-color: #f5f8fb;
}

:deep(
    .ant-form-item-has-error
      :not(.ant-input-disabled):not(.ant-input-borderless).ant-input:hover
  ) {
  background-color: #f5f8fb;
  border-color: transparent;
}

:deep(
    .ant-form-item-has-error
      :not(.ant-input-disabled):not(.ant-input-borderless).ant-input:focus
  ) {
  border-color: transparent;
}
</style>
